<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box {
            height: 180px;
            padding-top: 30px;
            text-align: center;
         
        }
         body {
            background: url(img/10.jpg) no-repeat;
        }
		</style>
	</head>
	<body>
		<div class="box">
			<img src="img/10.jpg" width="200px"/>
			<img src="img/20.jpg"width="200px" />
			<img src="img/30.jpg" width="200px"/>
			<img src="img/40.jpg" width="200px"/>
			<img src="img/50.jpg" width="200px"/>	
		</div>
		<script>
			
			var box=document.getElementsByTagName("div")[0];
			var body=document.body;
			var Arr=box.children;
			for(var i=0;i<Arr.length;i++)
			{
				Arr[i].index=i;
				Arr[i].onclick=function(){
					
					body.style.backgroundImage = "url("+this.src+")";
				}
			}
			
			
		</script>
	</body>
</html>
